<template>
	<div class="kzf_box">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane class="button" label="UP主对比" transform:null name="first">
				<div class="kzf_first">
					<img src="../../assets/kzf_up1.png" alt="">
					<h1>UP主对比</h1>
					<p>本次对比可以通各种维度的数据可视化分析，从总量、增量、平均、趋势变化等全面分析洞察，形成数据对比，挑选最适合的UP主。</p>
					<div class="kzf_contrast">
						<div class="kzf_contrast2">
							<p><img src="../../assets/kzf_tu2.png" alt=""><span>常规对比</span></p>
							<p>一次最高只可对五个UP主，进行多维度在线数据对比</p>
						</div>
						<div class="kzf_contrast3">
							<p><img src="../../assets/kzf_tu3.png" alt=""><span>批量对比</span></p>
							<p>下载模板，一次输入多个UP主进行批量对比</p>
						</div>
					</div>
					<!-- 搜索 -->
					<div class="kzf_search">
						<input class="kzf_search2" type="text" placeholder="请输入UP主昵称或UID进行搜索">
						<button class="kzf_search3">搜索</button>
					</div>
				</div>

			</el-tab-pane>
			<el-tab-pane class="button" label="对比报告" name="second">
			<div  class="kzf_second">
				<div>
				<span class="kzf_violet"></span>
				<p>UP主对比列表</p>
				</div>
				<div class="kzf_second3">
					<p>UP主对比信息</p>
					<p>对比日期</p>
					<p>操作</p>
				</div>
				<img src="../../assets/kzf_tu4.png" alt="">
				<p>暂无数据</p>
			</div>
			</el-tab-pane>

		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first'
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		}
	};
</script>

<style >
	.kzf_box #tab-first,
	.kzf_box #tab-second {
		width: 115px;
		height: 40px;
		/* background-color: #f6f5ff; */
		color: black;
		text-align: center;
		padding: 0;
		font-size: 14px;
		line-height: 40px;
		z-index: 999;
	}

	.kzf_box .el-tabs__active-bar {
		background-color: red;
		height: 40px;
		background-color: #f6f5ff;
		border-top: 3px solid #5830a0;
	}
</style>
<style scoped="scoped">
	.kzf_box {
		width: 100%;
		height: 840px;
		/* border: 1px solid black; */
		background-color: #fff;

	}

	.kzf_first {
		width: 100%;
		height: 750px;
		/* background-color: aqua; */
		/* box-sizing: border-box; */
		overflow: hidden;
	}

	.kzf_first>img:nth-child(1) {
		display: block;
		margin: 0 auto;
		margin-top: 30px;
	}

	.kzf_first>h1 {
		font-size: 40px;
		text-align: center;
		margin-top: 20px;
	}

	.kzf_first>p {
		text-align: center;
		margin-top: 10px;
		color: #a8acb0;
		font-size: 10px;
		margin-bottom: 19px;
	}

	.kzf_contrast {
		width: 580px;
		height: 100px;
		/* background-color: red; */
		margin: 0 auto;
	}

	.kzf_contrast div {
		padding-left: 16px;
		padding-right: 15px;
		font-size: 14px;
		padding-top: 15px;
	}

	.kzf_contrast div:nth-child(1) {
		width: 260px;
		height: 100px;
		border: 1px solid #7030a0;
		border-radius: 5px;
		float: left;
	}

	.kzf_contrast div:nth-child(2) {
		width: 300px;
		height: 100px;
		border: 1px solid #7030a0;
		border-radius: 5px;
		float: right;
	}

	.kzf_contrast2 {
		background-color: #f6f5ff;
	}

	.kzf_contrast3 {
		border: 1px solid #efefef !important;
	}

	.kzf_contrast2 p:nth-child(1),
	.kzf_contrast3 p:nth-child(1) {
		font-size: 16px;

	}

	.kzf_contrast3 p:nth-child(1) {
		color: #a8acb0;
	}

	.kzf_contrast span {
		margin-left: 5px;

	}

	.kzf_contrast p:nth-child(2) {
		margin-top: 10px;
		color: #a8acb0;
	}
	.kzf_search{
		display: block;
		margin: 0 auto;
		width: 490px;
		height: 38px;
		/* background-color: red; */
		margin-top: 30px;
	}
	.kzf_search2{
		width:410px;
		height: 38px;
		border: 1px solid #b9c3d2;
		padding-left: 10px;
		border-radius: 2px 0 0 2px;
		border-right: 0;
	}
	.kzf_search3{
		width: 70px;
		background-color: #f5f7fa;
		height: 38px;
		border:1px #b9c3d2 solid;
		vertical-align: middle;
		border-radius: 0 2px 2px 0;
		color: #909399;
	}
	/* 第二页 */
	.kzf_second{
		width: 100%;
		height: 360px;
		/* background-color: #b9c3d2; */
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 17px;
	}
	.kzf_violet{
		display: inline-block;
		width: 4px;
		height: 17px;
		background-color: #5830a0;
		
	}
	.kzf_second>div{
		width: 100%;
		overflow: hidden;
	}
	.kzf_second>div>p:nth-child(2){
		display: inline-block;
		color: black;
		margin-left:10px;
	}
	.kzf_second3{
		width: 100%;
		background-color: #f8f9fb;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		margin-top:8px;
	}
	.kzf_second3 p{
		display: inline-block;
	}
	.kzf_second3 p:nth-child(1){
		width: 64%;
		margin-left: 5px;
	}
	.kzf_second3 p:nth-child(2){
		width: 25%;
	}
	.kzf_second>img{
		width: 160px;
		display: block;
		margin: 0 auto;
	}
	.kzf_second>p{
		display: block;
		text-align: center;
		color: #909399;
		margin-top: 5px;
	}
</style>
